import * as React from 'react';

export function SideBySide({ children, left = 1, right = 1 }) {
  const [first, ...rest] = React.Children.toArray(children);
  return (
    <div className="side-by-side flex row">
      <div className="left flex column left-porportion">{first}</div>
      <div className="right flex column right-porportion">{rest}</div>
      <style jsx>
        {`
          .left-porportion {
            flex: ${left};
          }
          .right-porportion {
            flex: ${right};
          }
          .flex {
            display: flex;
          }
          .row {
            flex-direction: row;
          }
          .side-by-side {
            width: 100%;
            padding: 0;
            border-radius: 4px;
          }
          .column {
            overflow: auto;
            padding-top: 0.75rem;
          }
          .left {
            padding-right: 12px;
          }
          .right {
            position: sticky;
            top: 0;
            // height: 100vh;
            max-height: 100vh;
            padding-left: 12px;
          }
          // .side-by-side :global(.heading) {
          //   margin: 0;
          // }
          @media screen and (max-width: 1000px) {
            .side-by-side {
              flex-direction: column;
            }
            .column {
              overflow: initial;
            }
            .left {
              padding: 0;
              border: none;
            }
            .right {
              padding-top: 1rem;
              padding-left: 0rem;
            }
          }
        `}
      </style>
    </div>
  );
}
